<template>
  <div id="app">
    <p>{{ msg | uppercase }}</p>
    <p>{{ msg | reverserData }}</p>
    <p>{{ msg | reverserSep("$") }}</p>
    <p>{{ msg | reverserSep("") }}</p>
    <p>{{ msg | reverserSep("@") }}</p>
    <!-- 3.多个过滤器一起使用 -->
    <p>{{ msg | uppercase | reverserData }}</p>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      msg: "HelloVue",
    };
  },
  methods: {},
  // 局部过滤器
  filters: {
    reverserData(value) {
      return value.split("").reverse().join("#");
    },
    // 传递过滤器的参数
    reverserSep(value, sep) {
      return value.split("").reverse().join(sep);
    },
  },
};
</script>

<style>
</style>
